<script setup lang="ts">
definePageConfig({
  navigationBarTitleText: '个人中心'
});
import { computed, onMounted } from 'vue';
import { useRouterPush } from '@/composables';
import { useAuthStore } from '@/store';
import { storeToRefs } from 'pinia';
import { useLogout, useImage, useGetAuthInfo } from '@/hooks';
import Taro from '@tarojs/taro';
import { AppName } from '@/constants';
import { PlatformUtils } from '@/utils';
import ren from '@/assets/img/ren.png'

const { nurseUser } = storeToRefs(useAuthStore());
const authStore = useAuthStore();

// 默认头像图片
// const defaultAvatar = 'https://img.icons8.com/color/96/000000/user-male-circle.png';

// // 头像加载错误处理
// const handleAvatarError = (event: Event) => {
//   const target = event.target as HTMLImageElement;
//   if (target && target.dataset.default) {
//     target.src = target.dataset.default;
//   }
// };

// nurseUser.value

// 页面加载时检查登录状态和用户信息
onMounted(async () => {
  // 如果已登录但没有用户信息，尝试获取用户信息
  if (authStore.isLogin && (!nurseUser.value.name || !nurseUser.value.id)) {
    // 已登录但缺少用户信息，正在获取
    await useGetAuthInfo();
  }
});

// 页面显示时也检查登录状态
Taro.useDidShow(async () => {
  // 如果已登录但没有用户信息，尝试获取用户信息
  if (authStore.isLogin && (!nurseUser.value.name || !nurseUser.value.id)) {
    // 页面显示，检查用户信息
    await useGetAuthInfo();
  }
});

const {
  toHelp,
  toRefundList,
  toPrivacy,
  toServer,
  toOrder,
  toGoodsOrder,
  toMine,
  toBillList,
  toGuardianList,
  toAddrList,
  toMyComment,
  toSpecialList,
  toHealthCode
} = useRouterPush();

const isHuaSheng = computed(() => {
  // return nurseUser.value?.defaultHospitalName?.includes('华声');
  // return AppName == 'huasheng'
  return PlatformUtils.isHuaSheng();
});

const pathList = [
  // {
  //   to: () => toInfo(),
  //   text: '账号与安全',
  //   icon: 'i-local-people-fill'
  // },
  {
    to: () => toGuardianList(),
    text: '我的被监护人',
    icon: 'i-local-people-fill'
  },
  {
    to: () => toHealthCode(),
    text: isHuaSheng.value ? '我的健康码' : '我的诊疗卡',
    icon: 'i-local-people-fill'
  },
  {
    to: () => toServer(),
    text: '服务员推荐',
    icon: 'i-local-people-fill'
  },
  {
    to: () => toSpecialList(),
    text: '我的优惠劵',
    icon: 'i-local-coupon'
  },
  {
    to: () => toOrder(),
    text: '服务订单',
    icon: 'i-local-coupon'
  },
  {
    to: () => toGoodsOrder(),
    text: '商品订单',
    icon: 'i-local-coupon'
  },
  {
    to: () => toAddrList(),
    text: '被监护人地址',
    icon: 'i-local-address'
  },
  {
    to: () => toMyComment(),
    text: '我的评论',
    icon: 'i-local-comment-outline'
  },
  {
    to: () => toRefundList(),
    text: '我的退款',
    icon: 'i-local-refund-cny-fill'
  },
  {
    to: () => toBillList(),
    text: '电子发票',
    icon: 'i-local-bill'
  },
  {
    to: () => toHelp(),
    text: '联系客服',
    icon: 'i-local-phone-sharp'
  },
  {
    to: () => toPrivacy(),
    text: '隐私协议',
    icon: 'i-local-agreement'
  }
];
const Icon = computed(() => (_icon: string) => `${_icon} w-36px h-36px`);
</script>
<template>
  <basic-layout>
    <!-- <custom-navbar title="个人中心" /> -->

    <view class="w-375px text-primary flex-col-center justify-start">
      <view class="w-375px flex-center h-80px bg-gradient-to-bl from-#f39c12/60 via-#2ecc71:80 to-#9b59b6_70">
        <view class="ml-3 w-4/5 h-full flex justify-start items-center">
          <view class="">
            <nut-avatar size="large">
              <img :src="useImage(nurseUser.avatar || ren)"/>
            </nut-avatar>
          </view>
          <view class="ml-2 flex-col-center items-start">
            <view class="flex justify-between items-center">
              <view class="text-lg" v-if="authStore.isLogin">{{ (nurseUser.name || '未设置') }}</view>
              <nut-button class="text-lg" size="small" type="danger" v-else @tap="useLogout">去登陆</nut-button>
            </view>
            <view class="font-bold">
              <text class="text-white">{{ nurseUser.phone || '' }}</text>
            </view>
          </view>
        </view>
        <view class="w-1/5 h-full flex-center" @click="toMine(1)">
          <view class="i-local-settings-account text-white w-40px h-40px"></view>
        </view>
      </view>

      <view class="w-350px bg-#fff mt-2 shadow b-rounded-3" :class="{ 'pointer-events-none opacity-50': !authStore.isLogin }">
        <view v-for="(item, index) in pathList" class="flex h-60px w-auto flex-col-center">
          <view class="flex-center w-full h-full" @click="item.to">
            <view class="w-5/6 h-full flex justify-start items-center">
              <view class="ml-2">
                <view :class="Icon(item.icon)" />
              </view>
              <view class="ml-2 flex-col-center items-start text-lg">
                {{ item.text }}
              </view>
            </view>
            <view class="w-1/6 h-full flex-center">
              <view class="i-local-right-bold w-24px h-24px"></view>
            </view>
          </view>
          <view v-if="index !== pathList.length - 1" class="w-340px b-b-solid b-b-1"></view>
        </view>
      </view>
    </view>
    <basic-button :text="authStore.isLogin ? '退出登录' : '去登陆'" class="mb-15 m-t-2" @click="useLogout" />
  </basic-layout>
</template>
